.pop-view{
    display: flex;
    background: rgba(0, 0, 0, 0.72);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    justify-content: center;
    align-items: center;
    animation: fade 300ms;
    animation-fill-mode: forwards;
    .panel{
        width: 80%;
        max-width: 400px;
        background: #ffffff;
        .header{
            display: flex;
            align-items: center;
            border-bottom: solid 1px #f0f0f0;
            .title{
                padding: 20px;
                font-size: 20px;
                text-align: left;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                flex: 1;
            }
            .close{
                background: url(../../assets/close.png) no-repeat center;
                background-size: contain;
                width: 20px;
                height: 20px;
                margin-right: 20px;
                cursor: pointer;
            }
        }
        .btns{
            display: flex;
            border-top: solid 1px #f0f0f0;
            .btn{
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 18px;
                height: 48px;
                cursor: pointer;
            }
            .btn:nth-child(2){
                border-left: solid 1px #f0f0f0;
            }
        }
    }
}

@keyframes fade{
    0%{opacity: 0;}
    100%{opacity: 1;}
}